<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>也许有用 技术论坛 - MAYBE IT WORKS</title>
    <link th:href="@{/show/css/bootstrap.min.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/show/css/style.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/show/css/nprogress.css}" type="text/css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js" type="text/javascript"></script>
    <script src="js/respond.min.js" type="text/javascript"></script>
    <script src="js/selectivizr-min.js" type="text/javascript"></script>
    <![endif]-->
    <link rel="apple-touch-icon-precomposed" th:href="@{/show/images/icon/icon.png}">
    <link rel="shortcut icon" th:href="@{/show/images/icon/favicon.ico}">
    <meta name="Keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" th:href="@{/show/css/imgSizeSmall.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <script th:src="@{/layui/layui.js}"></script>

</head>

<body>
<section class="container user-select">
    <header th:replace="~{show/main :: leftbar}"></header>
    <!--/超小屏幕可见-->
    <div class="content-wrap"><!--内容-->
        <div class="content">
            <header class="news_header">
                <h2 th:text="${datafile.getTitle()}">欢迎来到异清轩技术博客</h2>
                <input type="hidden" id="id" th:value="${datafile.getFileId()}">
                <ul>
                    <li > <i class="layui-icon" style="color: #f5df1c">&#xe67a;</i><span th:text="${statistic.getAverage()}+'星'"></span>(平均评价)</li>
                    <li>价格：<strong th:text="${datafile.getPrice()}">123</strong>金币</li>
                    <li th:text="${datafile.getAuthor()}+'发布于'+${#dates.format(datafile.getCreateTime(),'yyyy-MM-dd')}">发布于 2015-06-29</li>
                    <li th:text="${datafile.getType()}"></li>
                    <li th:text="${datafile.getFilesize()}"></li>
                    <li><strong th:text="${statistic.getDownup()}">23</strong> 人下载 </li>
                </ul>
            </header>
            <article class="news_content">
                <p th:text="${datafile.getDescription()}">描述...................................</p>
            </article>
            <div class="news_tags content-block comment comment-form-btn">
                <button id="downup" class="btn btn-default btn-comment">立即下载</button>
            </div>

            <div class="content-block comment">
                <h2 class="title"><strong>评论</strong></h2>
                <form  method="post" class="form-inline" id="comment-form">

                    <div class="comment-form">
                        <textarea placeholder="你的评论可以一针见血" id="commentContent" name="commentContent"></textarea>
                        <div class="comment-form-footer">
                            <div th:if="${buy=='no'}" class="comment-form-text">请先 <a href="javascript:;">登录</a> 并购买后才可以评论 </div>
                            <div th:if="${buy=='yes'}" class="comment-form-text"><span>满意成都：</span><div style="margin-top: -8px" id="pingfen"></div></div>
                            <div class="comment-form-btn">
                                <button th:if="${buy=='yes'}" type="button" id="yesbtn" class="btn btn-default btn-comment">提交评论</button>
                                <button th:if="${buy=='no'}" type="button"  id="nobtn" class="btn btn-default btn-comment">提交评论</button>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="comment-content">
                    <ul>
                        <li th:each="comment:${fileComments}">
                            <span class="face">
                                <img th:src="@{/upload/userimg/}+${comment.getAvatar()}" alt="">
                            </span> <span class="text">
                            <strong th:text="${comment.getAuthor()}">异清轩站长</strong>
                            <span class="layui-badge layui-bg-gray" th:text="${'IP属地:'+comment.getIpHome()}">灰</span>
                            <span th:if="${comment.getAuthor()==datafile.getAuthor()}" class="layui-badge layui-bg-blue">上传者</span>
                            <font style="color: #f5df1c" th:each="i:${#numbers.sequence(1,5)}">
                                <i th:if="${i+''<=comment.getScore()}" class="layui-icon">&#xe67a;</i>
                                <i th:if="${i+''>comment.getScore()}" class="layui-icon">&#xe67b;</i>
                            </font>
                            (<font th:text="${#dates.format(comment.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}">2015-10-18</font>) 说：
                            <button th:if="${session.loginUser!=null}"  th:onclick="hui([[${comment.getAuthor()}]],[[${comment.getId()}]])"  type="button" style="border-width: 0;color: #0a789b" class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue">回复</button><br />
                            <font th:text="${comment.getContent()}"></font>
                            </span>
                            <!--子评论-->
                            <ul style="margin-left: 25px" th:if="${comment.getSons().size()>0}">
                                <li th:each="son:${comment.getSons()}">
                                    <span class="face">
                                        <img th:src="@{/upload/userimg/}+${son.getAvatar()}" alt="">
                                    </span> <span class="text">
                                    <strong th:text="${son.getAuthor()}">异清轩站长</strong>
                                     <span class="layui-badge layui-bg-gray" th:text="${'IP属地:'+son.getIpHome()}">灰</span>
                                    <span th:if="${son.getAuthor()==datafile.getAuthor()}" class="layui-badge layui-bg-blue">上传者</span> (<font th:text="${#dates.format(son.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}">2015-10-18</font>)
                                    <font th:if="${son.getBauthor()!=null &&son.getAuthor()!=datafile.getAuthor()&&son.getAuthor()!=son.getBauthor()}"> 回复 <strong th:text="${son.getBauthor()}"></strong></font>说：
                                    <button th:if="${session.loginUser!=null}"  th:onclick="hui([[${son.getAuthor()}]],[[${comment.getId()}]])"  type="button" style="border-width: 0;color: #0a789b" class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue">回复</button><br />
                                    <font th:text="${son.getContent()}"></font>
                                    </span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
           <!-- <div class="content-block related-content visible-lg visible-md">
                <h2 class="title"><strong>相关推荐</strong></h2>
                <ul>
                    <li><a target="_blank" href=""><img src="images/logo.jpg" alt="">
                        <h3> 欢迎来到异清轩技术博客,在这里可以看到网站前端和后端的技术等 </h3>
                    </a></li>
                    <li><a target="_blank" href=""><img src="images/img1.jpg" alt="">
                        <h3> 欢迎来到异清轩技术博客,在这里可以看到网站前端和后端的技术等 </h3>
                    </a></li>
                    <li><a target="_blank" href=""><img src="images/img3.jpg" alt="">
                        <h3> 欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等 </h3>
                    </a></li>
                    <li><a target="_blank" href=""><img src="images/img2.jpg" alt="">
                        <h3> 欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等 </h3>
                    </a></li>
                    <li><a target="_blank" href=""><img src="images/img2.jpg" alt="">
                        <h3> 欢迎来到异清轩技术博客,在这里可以看到网站前端和后端的技术等 </h3>
                    </a></li>
                    <li><a target="_blank" href=""><img src="images/img3.jpg" alt="">
                        <h3> 欢迎来到异清轩技术博客,在这里可以看到网站前端和后端的技术等 </h3>
                    </a></li>
                    <li><a target="_blank" href=""><img src="images/img1.jpg" alt="">
                        <h3> 欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等 </h3>
                    </a></li>
                    <li><a target="_blank" href=""><img src="images/logo.jpg" alt="">
                        <h3> 欢迎来到异清轩技术博客，在这里可以看到网站前端和后端的技术等 </h3>
                    </a></li>
                </ul>
            </div>-->
        </div>
    </div>
    <!--/内容-->
    <aside th:replace="~{show/main :: rightbar}"><!--右侧>992px显示-->

    </aside>
    <!--/右侧>992px显示-->
    <footer th:replace="~{show/main :: bottombar}"></footer>
</section>
<div><a href="javascript:;" class="gotop" style="display:none;"></a></div>
<!--/返回顶部-->
<script th:src="@{/show/js/jquery-2.1.4.min.js}" type="text/javascript"></script>
<script th:src="@{/show/js/nprogress.js}" type="text/javascript" ></script>
<script th:src="@{/show/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/show/js/comm/right.js}" type="text/javascript"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript"  th:inline="javascript">
    //页面加载
    $('body').show();
    $('.version').text(NProgress.version);
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
    //返回顶部按钮
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop()>100){
                $(".gotop").fadeIn();
            }
            else{
                $(".gotop").hide();
            }
        });
        $(".gotop").click(function(){
            $('html,body').animate({'scrollTop':0},500);
        });
    });
    //提示插件启用
    $(function () {
        $('[data-toggle="popover"]').popover();
    });
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
    //鼠标滑过显示 滑离隐藏
    //banner
    $(function(){
        $(".carousel").hover(function(){
            $(this).find(".carousel-control").show();
        },function(){
            $(this).find(".carousel-control").hide();
        });
    });
    //本周热门
    $(function(){
        $(".hot-content ul li").hover(function(){
            $(this).find("h3").show();
        },function(){
            $(this).find("h3").hide();
        });
    });
    //相关推荐
    $(function(){
        $(".related-content ul li").hover(function(){
            $(this).find("h3").show();
        },function(){
            $(this).find("h3").hide();
        });
    });
    //页面元素智能定位
    $.fn.smartFloat = function() {
        var position = function(element) {
            var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
            var pos = element.css("position"); //当前元素距离页面document顶部的距离
            $(window).scroll(function() { //侦听滚动时
                var scrolls = $(this).scrollTop();
                if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
                    if (window.XMLHttpRequest) { //如果不是ie6
                        element.css({ //设置css
                            position: "fixed", //固定定位,即不再跟随滚动
                            top: 0 //距离页面顶部为0
                        }).addClass("shadow"); //加上阴影样式.shadow
                    } else { //如果是ie6
                        element.css({
                            top: scrolls  //与页面顶部距离
                        });
                    }
                }else {
                    element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式
                        position: pos,
                        top: top
                    }).removeClass("shadow");//移除阴影样式.shadow
                }
            });
        };
        return $(this).each(function() {
            position($(this));
        });
    };
    //启用页面元素智能定位
    $(function(){
        $("#search").smartFloat();
    });
    /*评分*/
    layui.use('layer', function(){
        var xiang="";

        layui.use(['rate'], function(){
            var rate = layui.rate;
            //只读部分
        /*    rate.render({
                elem: '#readRate'
                ,length: 1
                ,value: 1
                ,readonly: true
            });*/
            //自定义文本
            rate.render({
                elem: '#pingfen'
                ,value: 0
                ,choose: function(value){
                    if(value > 4) layer.msg('么么哒');
                    xiang=value;
                    }
                ,theme: '#1E9FFF'
                ,text: true
                ,setText: function(value){ //自定义文本的回调
                    var arrs = {
                        '1': '极差'
                        ,'2': '差'
                        ,'3': '中等'
                        ,'4': '好'
                        ,'5': '极好'
                    };
                    this.span.text(arrs[value] || ( value + "星"));
                }
            })
        })

        var layer = layui.layer;
        //下载
        $(function () {
            $("#downup").click(function () {
                var login=[[${session.loginUser}]];
                if (login==null){
                    layer.msg('请先登录');
                }else {
                    if ([[${session.loginUser.getUserAccount}]]==[[${datafile.getAuthor()}]]){
                         window.location.href="/fileDown/down/"+$("#id").val();
                        layer.msg('上传者，下载无需金币');
                        return false;
                    }
                    $.ajax({
                        type:'post',
                        url:'/fileDown/check/'+$("#id").val(),
                        dataType: "text",
                        async: true,
                        success:function (data) {
                            if (data==1){
                                window.location.href="/fileDown/down/"+$("#id").val();
                                layer.msg('注意保存文件，下次下载还是要花积分哦！');
                                setTimeout(function(){
                                    window.location.reload();//刷新当前页面.
                                },2000)
                                /*window.location.href="/show/fileContent/"+$("#id").val();*/
                            }else if (data==-1){
                                layer.msg('积分不足，请先充值');
                            }
                        },
                        error:function () {
                            alert("下载异常");
                        }
                    });

                }
            });
            //评论
            $("#nobtn").click(function () {
                if ([[${session.loginUser.getUserAccount}]]==[[${datafile.getAuthor()}]]){
                    layer.msg('上传者不可自己评论，只能回复');
                    return false;
                }
                layer.msg('亲，购买后才能评论哦！');
            })
            $("#yesbtn").click(function () {
                var flage=flage;
                if ($("#commentContent").val()==''){
                    layer.msg('评论不可以为空');
                }
                $.ajax({
                    type:'post',
                    url:'/fileComment/comment/'+$("#id").val()+'/'+xiang+'/'+[[${datafile.getAuthor()}]],
                    data:{"content":$("#commentContent").val(),"ip":returnCitySN["cip"],"ipHome":returnCitySN["cname"]},
                    dataType: "text",
                    async: false,
                    success:function (data) {
                        if (data==1){
                            flage=true
                        }
                    },
                    error:function () {
                        alert("评论异常");
                    }
                });
                if (flage){
                    layer.msg("感谢评论");
                }else {
                    layer.msg("不可以重复评论，但可以回复");
                }
            })
        });

    });
    //提交回复
    function btn_hui() {
        var login = [[${session.loginUser}]];
        if (login == null) {
            alert("请先登录")
        } else {
            if ($("#show2").val()==''){
                alert("不可以为空")
                return false
            }
            $("#ip").val(returnCitySN["cip"]);
            $("#ipHome").val(returnCitySN["cname"]);
            $.ajax({
                type: 'post',
                url: '/fileComment/hui',
                data: $('#comment-form_hui').serialize(),
                dataType: "text",
                async: false,
                success: function (data) {
                    if (data == 1) {
                        window.location.reload()
                    }
                }
            });
        }
    }
    //回复功能
    function hui(author,fid) {
        /* alert(id+'-'+author+'-'+fid+'-'+idx);*/
        $(".showhui").hide();
        var that=$(event.target);
        var id=$("#id").val();
        that.parent().append('<li class="showhui"><form class="form-inline" id="comment-form_hui">\n' +
            '          <div class="comment-form">\n' +
            '<input type="hidden" id="ipHome" name="ipHome">'+
            '<input type="hidden" id="ip" name="ip">'+
            '            <input type="hidden"  name="fileId" value="'+id+'">\n' +
            '            <input type="hidden"  name="bauthor" value="'+author+'">\n' +
            '            <input type="hidden"  name="father" value="'+fid+'">\n' +
            '            <textarea id="show2" placeholder="优质的评论可以帮助作者获得更高的权重"  name="content"></textarea>\n' +
            '            <div class="comment-form-footer">\n' +
            '              <div class="comment-form-text">请先 <a href="javascript:;">登录</a> 或 <a href="javascript:;">注册</a>，才可以评论 </div>\n' +
            '              <div class="comment-form-btn">\n' +
            '                <button onclick="btn_hui()" type="button" class="btn btn-default btn-comment">提交评论</button>\n' +
            '              </div>\n' +
            '            </div>\n' +
            '          </div>\n' +
            '        </form></li>');
        $("#show2").blur(function () {
            $(".showhui").hide();
        })
    }
</script>

</body>
</html>
